<template>
  <div class="brand-extractor-tool-page">
    <div class="page-header">
      <div class="header-left">
        <h2>品牌提取工具</h2>
      </div>
      <div class="header-right">
        <el-button @click="goBack" plain>
          <el-icon><Back /></el-icon>返回
        </el-button>
      </div>
    </div>

    <div class="tool-container">
      <!-- 使用BrandExtractor组件并强制显示 -->
      <BrandExtractor
        ref="brandExtractor"
        v-model="showExtractor"
        :page-mode="true"
        @complete="handleBrandExtractorCompleted"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Back } from '@element-plus/icons-vue'
import { getAllBrands } from '@/api/brand'
import BrandExtractor from '@/components/BrandExtractor.vue'

const router = useRouter()
const showExtractor = ref(true) // 始终显示提取器
const brandExtractor = ref(null)

// 返回上一页
const goBack = () => {
  router.push('/brand-extractor')
}

// 处理品牌提取完成
const handleBrandExtractorCompleted = async (result) => {
  if (result.success && result.addedCount > 0) {
    ElMessage.success(`成功添加 ${result.addedCount} 个新品牌到系统`)
    
    // 如果添加了新品牌，刷新品牌库
    if (result.needsRefresh) {
      try {
        // 通过调用获取品牌列表API来触发后端刷新品牌库缓存
        await getAllBrands({ page: 1, page_size: 10 })
        console.log('品牌库刷新完成')
      } catch (error) {
        console.error('刷新品牌库失败:', error)
      }
    }
    
    // 完成后返回上一页
    setTimeout(() => {
      router.push('/brand-extractor')
    }, 1500)
  }
}

// 组件挂载时设置显示提取器
onMounted(async () => {
  // 先显示组件
  showExtractor.value = true
  
  // 等待组件渲染完成后，调整对话框样式
  await nextTick()
  
  // 确保对话框正确显示
  const dialogEl = document.querySelector('.brand-extractor-tool-page .el-dialog')
  if (dialogEl) {
    dialogEl.style.margin = '0'
    dialogEl.style.width = '100%'
    dialogEl.style.maxWidth = '100%'
    dialogEl.style.height = 'auto'
    
    // 隐藏弹窗背景
    const overlayEl = document.querySelector('.brand-extractor-tool-page .el-overlay')
    if (overlayEl) {
      overlayEl.style.backgroundColor = 'transparent'
      overlayEl.style.pointerEvents = 'none'
    }
  }
})
</script>

<style scoped>
.brand-extractor-tool-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.tool-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-height: 500px;
  position: relative;
}

/* 覆盖BrandExtractor组件内部样式，使其适应页面模式 */
:deep(.el-dialog) {
  margin: 0 !important;
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

:deep(.el-dialog__header) {
  display: none !important;
}

:deep(.el-dialog__body) {
  padding: 20px !important;
}

:deep(.el-dialog__headerbtn) {
  display: none !important;
}

:deep(.el-overlay) {
  background-color: transparent !important;
  pointer-events: none !important;
}

:deep(.el-dialog__wrapper) {
  position: static !important;
  overflow: visible !important;
}

:deep(.brand-extractor) {
  width: 100%;
  min-height: 500px;
}

:deep(.main-container) {
  min-height: 500px;
}
</style> 